import React from 'react';
import { useTabs } from './context';
import styles from './styles.module.scss';
import {TabItem} from "@/components/tabs/item";

const Tabs = () => {
  const { tabs, activeTab, switchTab } = useTabs();

  return (
    <div className={styles.container} style={{display: tabs.length ? 'flex' : 'none'}}>
      {tabs.map(tab => (
        <TabItem {...tab} key={tab.key} active={tab.key === activeTab} onClick={()=>switchTab?.(tab.key)}/>
      ))}
    </div>
  );
};

export default Tabs;
